Case study Biblioshop - boeken- en detailpagina

We plaatsen de lijst van de boeken en de details van een boek op dezelfde pagina. Als je op een boek in de lijst klikt vergroot de tegel waarin het boek staat en worden de details getoond. Het volledige project kan je hier downloaden: biblioshop.zip.

Video

Probleemstelling

In het overzicht van de boeken op de boekenpagina tonen we:

de afbeelding van de cover,
de auteur en
de titel.

Als je op het boek klikt worden de details getoond:

afbeelding van de cover
title
subtitle
author
publication-date
publisher
category
size
number-of-pages
price
language
product-code
product-type
product-full-type
description

Oplossing

HTML structuur
Op de Books pagina staan alle gegevens van het boek. De gegevens die in het overzicht getoond worden en de gegevens die in detail worden getoon. We zetten de overzicht gegevens in een figure element en de detail gegevens in een div element van de klasse detail:

<article id="article4">
    <figure>
        <a href="#article4">
            <img src="https://media.standaardboekhandel.be/-/media/mdm/product/9780735611313/frontImagesLink.img"
                alt="cover van het boek Code geschreven door Charles Petzold">
            <figcaption>
                <cite>Code</cite>
                <address>Charles Petzold</address>
            </figcaption>
        </a>
    </figure>
    <div class="detail">
        <img src="https://media.standaardboekhandel.be/-/media/mdm/product/9780735611313/frontImagesLink.img"
            alt="cover van het boek Code geschreven door Charles Petzold">
        <p class="title">Code</p>
        <p class="subtitle">The Hidden Language of Computer Hardware and Software</p>
        <p class="author">Charles Petzold</p>
        <p class="publication-date"><span>Verschijningsdatum:</span> 29/04/2003</p>
        <p class="publisher"><span>Uitgever:</span> MICROSOFT PRESS</p>
        <p class="category"><span>Categorie:</span> Non-fictie | Informatica | </p>
        <p class="size"><span>Afmetingen:</span> 160 mm x 230 mm</p>
        <p class="number-of-pages"><span>Aantal bladzijden:</span> 400</p>
        <p class="price"><span>Prijs:</span> € 33,95</p>
        <p class="language"><span>Taal:</span> Engels</p>
        <p class="product-code"><span>Productcode (EAN):</span> 9780735611313</p>
        <p class="product-type"><span>Type:</span> Boek</p>
        <p class="product-type-full"><span>Uitgave:</span> Paperback | Engels</p>
        <p class="description"><span>Bechrijving:</span> What do flashlights, the British invasion, black
            cats, and seesaws have to do with computers? In CODE, they show us the ingenious ways we
            manipulate language and invent new means of communicating with each other. And through CODE, we
            see how this ingenuity and our very human compulsion to communicate have driven the
            technological innovations of the past two centuries.
            Using everyday objects and familiar language systems such as Braille and Morse code, author
            Charles Petzold weaves an illuminating narrative for anyone who's ever wondered about the secret
            inner life of computers and other smart machines.
            It's a cleverly illustrated and eminently comprehensible story-and along the way, you'll
            discover you've gained a real context for understanding today's world of PCs, digital media, and
            the Internet. No matter what your level of technical savvy, CODE will charm you-and perhaps even
            awaken the technophile within.</p>
    </div>
</article>

De HTML van de Books.html pagina vind je onderaan de pagina.

CSS voor het overzicht
1. Voor het overzicht van de boeken gaan we flexbox gebruiken. Het element waarin alle article elementen staan zal dus een flex-container zijn. We plaatsen alle article elementen in een div element van de klasse overview:
```
<div class="overview">
    <article></article>
    ....
</div>
```
2. Deze div kunnen we selecteren met de klassenselector overview. We maken er een flex-container van en die moet even groot zijn als het ouderelement, de section van de klasse show-room. We werken mobile first, dus voegen we de CSS toe voor de staande versie, o.a. kolom richting:
```
.overview {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
}
```
3. In het overview worden de details niet getoond, dus zetten we het display attribuut van de klasse detail op none. Dit geldt voor zowel staand als liggend scherm:
```
.detail {
    display: none;
}
```
4. Nu maken we het article element op. Het article element is ook een flex-container en de elementen erin worden onder elkaar geplaatst:
```
.overview>article {
    display: flex;
    flex-direction: column; 
    flex-basis: 200px;
    flex-grow: 0;
    flex-shrink: 1;
    border: solid black 1px;
    padding: 1em;
    margin-top: 1em;
}
```
5. Nu nog de grootte van de afbeelding in het overzicht:
```
.overview>article img {
    width: 100%;
    /* even breed als article */
}
```
6. En de tekst in de figure maken we iets kleiner:
```
.overview>article figcaption {
    font-size: smaller;
}
```
7. En we plaatsen de naam van de auteur niet in schuinschrift:
```
.overview>article figcaption address {
    font-style: normal;
}
```
CSS voor de detail view
1. We maken de binnenkant van elke figure in article in een a element zodat je erop kunt klikken om de details te bekijken.
```
<figure>
    <a href="#article1">
    <img src="https://media.standaardboekhandel.be/-/media/mdm/product/9789082934915/frontImagesLink.img" 
            alt="cover van het boek Inleiding UML geschreven door Hendrik Jan van Randen">
    <figcaption>
        <cite>Inleiding UML</cite>
        <address>Hendrik Jan van Randen</address>
    </figcaption>
    </a>
</figure>
```
2. De url van de link is een bladwijzer naar een artikel nummer. Dus moeten we een elk artikel een id attribuut meegeven met als waarde het artikel nummer:
```
<article id="article1">
```
3. Een volledig artikel ziet er nu zo uit:
```
<article id="article1">
    <figure>
        <a href="#article1">
            <img src="https://media.standaardboekhandel.be/-/media/mdm/product/9780791417805/frontImagesLink.img"
                alt="cover van het boek Dbase-From the Dot Prompt geschreven door Warren M Littlefield">
            <figcaption>
                <cite>Dbase-From the Dot Prompt</cite>
                <address>Warren M Littlefield</address>
            </figcaption>
        </a>
    </figure>
    <div class="detail">
        ...
    </div>
</article>
```
4. Als er op een figure wordt geklikt willen we de details tonen. We gebruiken daarvoor de :target pseudoklasse van CSS. Daarmee kunnen we een CSS regel opstellen die moet worden uitgevoerd als er op een element geklikt wordt.
  1. We willen de lay-out van het overzicht verbergen, namelijk heel het figure element:
```
article:target > figure {
    display:none;
}
```
    Je leest dit als volgt: als er op article geklikt wordt verberg dan het figure element dat in article staat.
  2. Vervolgens moeten we de detail-div tonen want die staat ingesteld op display:none. Als er article geklikt wordt maak de detail-div die in het article staat zichtbaar:
```
article:target > div.detail {
    display:block;
}
```
  3. Tenslotte maken we het geselecteerde article breder:
```
article:target {
    flex-basis: 600px;
}
```
    We moeten hier geen media-query voorzien, omdat we de flex-shrink eigenschap ingesteld heben op 1.
5. Als we de pagina in de browser bekijken zien we dit:
  
  biblioshop - detail - eerste versie
We moeten nu nog de volgende punten bijwerken:
1. Staand formaat: afbeelding in de detail-div (juiste selector kiezen) verkleinen en in het midden van de kolom tonen:
```
article > div.detail > img {
    width: 60%;
    margin: 0 20%;
}
```
2. Liggend formaat: afbeelding in de detail-div verkleinen en links van de tekst laten zweven voor liggend beeldscherm. Ik plaats alle media-query's altijd helemaal aan het einde van het CSS bestand in een blok, zodat ze de relevante stijlregels hogerop in de CSS overschreven kunnen worden.:
```
@media (min-width: 800px) {
    ...
    article > div.detail > img {
        width: 12rem;
        margin: 0 5% 0 0;
        float: left;
    }
}
```
3. De beschrijving en de ondertitel zetten we in een kleiner lettertype:
```
div.detail .description, div.detail .subtitle {
    font-size: smaller;
}
```
4. De labels zetten we in het grijs:
```
div.detail p span {
    color: darkgrey;
}
```
5. En de kaders niet meer rond article maar rond figure en div.detail, evenals de padding hier verwijderen en bij figure en div.detail plaatsen:
```
.overview>article {
    display: flex;
    flex-basis: 200px;
    flex-grow: 0;
    flex-shrink: 1;
    flex-direction: column;
    border: solid black 1px;
    padding: 1em;
    margin-top: 1em;
}
```
  en de border en een beetje witruimte (padding) toevoegen aan figure:
```
.overview article figure {
    border: solid black 1px;
    padding: 0.5em;
}
```
  en aan div.detail:
```
.detail {
    display: none;
    border: solid black 1px;
    padding: 0.5em;
}
```

2020-11-22 18:29:56